<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
        1.代理中的this
     */

    const target = {
        thisValEqualsProxy() {
            return this === proxy
        }
    }
    const proxy = new Proxy(target, {})
    console.log(target.thisValEqualsProxy()) // false
    console.log(proxy.thisValEqualsProxy()) // true

    /*
        fixme:不懂
        1.2.后面一个不太懂的高端操作,代码贴出来,自己体会
     */
    const wm = new WeakMap();

    class User {
        constructor(userId) {
            wm.set(this, userId);
        }

        set id(userId) {
            wm.set(this, userId);
        }

        get id() {
            return wm.get(this);
        }
    }

    const user = new User(123);
    console.log(user.id); // 123
    const userInstanceProxy = new Proxy(user, {});
    console.log(userInstanceProxy.id); // undefined
    
    
    // 解决问题
    const UserClassProxy = new Proxy(User, {});
    const proxyUser = new UserClassProxy(456);
    console.log(proxyUser.id);


    /*
        2.代理与内部槽位
     */

    console.log('---2---')
    const target2 = new Date();
    const proxy2 = new Proxy(target2, {});
    console.log(proxy instanceof Date); // true 
    proxy2.getDate(); // TypeError: 'this' is not a Date object

</script>
</body>
</html>